<template>
    <div id="app">
        <Head>个人资料</Head>
        <div class="topbg">
            <div class="title">个人信息</div>
            <div class="content">完善自己的职业资料</div>
        </div>
        <div class="tisp" @click="setting">
            <div v-if="info.is_public===0"  class="tisptwo">
                您的信息已关闭，暂时无法接单，<div class="span">立即开启</div>
            </div>
            <div v-else>如果不想被打扰，立即设置您的信息展示状态</div>
            <van-icon name="arrow" class="ic_right"/>
        </div>
        <router-link  class="line" to="/freelance/basic">
            <div class="title">基本资料<span>*</span></div>
            <div class="statediv">
                <div>{{info.basic_complete?'已完成':'请填写'}}</div>
                <van-icon name="arrow" class="ic_right"/>
            </div>
        </router-link>
        <router-link  class="line" to="/freelance/service">
            <div class="title">提供服务<span>*</span></div>
            <div class="statediv">
                <div>{{info.service_complete?'已完成':'请填写'}}</div>
                <van-icon name="arrow" class="ic_right"/>
            </div>
        </router-link>
        <router-link  class="line" to="/freelance/specialty">
            <div class="title">技能专长<span>*</span></div>
            <div class="statediv">
                <div>{{info.skill_complete?'已完成':'请填写'}}</div>
                <van-icon name="arrow" class="ic_right"/>
            </div>
        </router-link>
        <router-link  class="line" to="/freelance/experience">
            <div class="title">项目经历<span>*</span></div>
            <div class="statediv">
                <div>{{info.project_complete?'已完成':'请填写'}}</div>
                <van-icon name="arrow" class="ic_right"/>
            </div>
        </router-link>
        <router-link  class="line" to="/freelance/casestudy">
            <div class="title">作品案例<span>*</span></div>
            <div class="statediv">
                <div>{{info.work_complete?'已完成':'请填写'}}</div>
                <van-icon name="arrow" class="ic_right"/>
            </div>
        </router-link>
    </div>
</template>
<script>
import Vue from 'vue'
import { Icon } from 'vant'
import http from '@/utils/http'
import api from '@/api'

Vue.use(Icon)
export default {
  components: {
  },
  data () {
    return {
      info: {}
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    onLoad () {

    },
    fetchData () {
      http.get(api.pre_save_resume)
        .then(res => {
          this.info = res.data
        }).catch(() => {})
    },
    setting () {
      var that = this
      that.$dialog
        .confirm({
          title: '设置隐私信息',
          confirmButtonText: '公开',
          cancelButtonText: '隐藏'
        })
        .then(() => {
          http.post(api.set_resume_public, {is_public: 1})
            .then(res => {
              this.fetchData()
            }).catch(() => {})
        })
        .catch(() => {
          http.post(api.set_resume_public, {is_public: 0})
            .then(res => {
              this.fetchData()
            }).catch(() => {})
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.topbg{
    height: 85px;
    background: url('../../assets/freelance/images/info.png') right 0 no-repeat;
    background-size: 84px 85px;
    padding-left: 20px;
    .title{
        padding-top: 26px;
        line-height: 1;
        font-weight: bold;
        font-size: 22px;
        color: #2a3140;
    }
    .content{
        line-height: 1;
        margin-top: 13px;
        font-size: 12px;
        color: #9ba4b5;
    }
}
.tisp{
    height: 35px;
    line-height: 1;
    border-radius: 50px;
    background-color: #fff5ec;
    background-image: url('../../assets/freelance/images/tisp_03.png');
    background-position: 11px center;
    background-repeat: no-repeat;
    background-size: 24px 23px;
    font-size: 12px;
    color: #a4680e;
    padding-left: 45px;
    display: flex;
    align-items: center;
    margin: 11px 12px 20px 12px;
    position: relative;
    .tisptwo{
        line-height: 1;
        font-size: 12px;
        color: #a4680e;
        display: flex;
        .span{
            line-height: 1;
            color:#ff5411;
        }
    }
    .ic_right{
        position: absolute;
        right: 8px;
    }
}
.line{
    height: 54px;
    background-color: #ffffff;
    border-left: 18px solid #ffffff;
    border-right: 18px solid #ffffff;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    position: relative;
    .title{
        line-height: 1;
        font-size: 16px;
        color: #555555;
        position: relative;
        span{
            margin-left: 7px;
            line-height: 1;
            color: #ff4b20;
        }
    }
    .statediv{
        position: absolute;
        right: 0px;
        color: #c4c7cd;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
}
</style>
